<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="3.css">
    <title>舒尔特图训练</title>
    <style>
      .grid-container {
          display: grid;
          grid-template-columns: repeat(5, 100px); /* 每行5个100px的盒子 */
          /* grid-gap: 5px; 盒子之间的间距 */
          margin: 5% auto 2% auto;
          width: max-content;
          border: 1px solid black;
      }
          
      .boxcle {
          width: 100px;
          height: 100px;
          border: 1px solid black;
          text-align: center;
          line-height: 100px;
          font-size: 20px;
          cursor: default;
          transition: background-color 0.3s ease;
      }
      
      .boxcle:hover {
          background-color: cyan;
      }
    </style>
</head>
<body>
    <div class="grid-container">
      <!-- 25 个 .boxcle 元素，内容为 1 到 25 -->
    </div>
    <div style="width: 100%;text-align: center;">
        时间: <span id="time">0</span> 秒
    </div>
</body>

<script>
  const container = document.querySelector('.grid-container');
  const timeSpan = document.getElementById('time');

  // 生成 1-25 的随机不重复数组
  const numbers = Array.from({ length: 25 }, (_, i) => i + 1)
                     .sort(() => Math.random() - 0.5);

  let currentClickNumber = 1;

  let startTime = null; // 存储开始时间戳
  let intervalId = null; // 存储 setInterval ID

  // 更新时间函数
  function startTimer() {
    startTime = Date.now();
    if (intervalId) return; // 避免重复启动定时器

    intervalId = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const elapsedSeconds = Math.floor(elapsed / 1000);
      timeSpan.textContent = elapsedSeconds + '.' + elapsed % 1000;
    }, 10); // 每 10ms 更新一次，即每秒更新 100 次
  }

  numbers.forEach(num => {
    const div = document.createElement('div');
    div.className = 'boxcle';
    div.textContent = num;

    div.addEventListener('click', function () {
      if (num === currentClickNumber) {
        this.style.backgroundColor = 'rgb(161, 161, 161)';
        currentClickNumber++; // 成功点击后，下一个目标数字 +1
      }

      // 如果是点击数字 1，开始计时
        if (num === 1) {
          startTimer();
        }
      // 如果是点击数字 25，结束计时
      if (currentClickNumber === 26) {
        clearInterval(intervalId);
        intervalId = null;
      }
    });
    
    container.appendChild(div);
  });
</script>
</html>